UI.SurveyInterpreter = function(params){

	this.cleanUI = function() {
	};
	
	this.displayContentOn = function(divId, survey) {
		var surveyHiddenInput = $("<input>").attr("type", "hidden").attr("id", survey.id).attr("name", "surveyId").attr("value", survey.id);
		var questionsContainer = $("<div></div>").attr("id","questions-container").attr("class","questions-container").append(surveyHiddenInput);
		
		var surveyContainer = $(divId);
		surveyContainer.append(questionsContainer);
		
		this.renderQuestionsOn(questionsContainer, survey.questions);
	};
	
	this.renderQuestionsOn = function(questionsContainer, questions) {
		var fieldset = $("<fieldset></fieldset>").attr("name", "questions-information").attr("enabled", true).attr("class", "general survey-questionnaire");
		fieldset.append($("<legend></legend>").append($("<label></label>").text("Please Complete the Survey")));		

		questionsContainer.append(fieldset);

		for (var i=0; i < questions.length; i++) {
			var question = questions[i];
			
			if ( question.value.trim().length > 0) {
				var list = $("<li></li>");
				
				var article = $("<article></article>").attr("id", "article-" + question.id).attr("class", "question-article");
				var questionLabel = $("<p></p>").text((i+1) + ". " + question.value).attr("class", "question-label");
				var hintLabel = 	$("<p></p>").text("Hint: " + question.hint).attr("class", "hint-label");
					
				article.append(questionLabel);
				article.append(this.createOptionsListContainer(question));
				article.append(hintLabel);
				
				if ( (i+1) < questions.length ) { /* en la ultima pregunta no pone el hr */
					article.append($("<hr>").attr("class", "hr-separator"));
				}
				
				fieldset.append(article);

				$("#" + question.id + "-move-left").click(function(event) {
					var questionId = event.currentTarget.id.substring(0,2);
					
				    move_list_items("question-" + questionId,"answer-" + questionId);
				});

				$("#" + question.id + "-move-rigth").click(function(event) {
					var questionId = event.currentTarget.id.substring(0,2);
				    move_list_items("answer-" + questionId,"question-" + questionId);
				});
			}
		}
		
		var surveySubmitButton = $("<a></a>").text("Enviar respuestas").attr("class", "button survey-submit-button");
		surveySubmitButton.click(function(){
			var interpreter = new UI.SurveyInterpreter();
			interpreter.prepareSurveyForSubmission();
			document.forms[0].submit();
		});
		
		fieldset.append($("<div></div>").attr("class","button-ctn").append(surveySubmitButton));
		
	};
	
	this.createOptionsListContainer = function (question) { 
		var answerSelect = $("<select></select>").attr("id", "answer-" + question.id).attr("name", question.id).attr("multiple", "multiple").attr("class", "option-list");
		var optionSelect = $("<select></select>").attr("id", "question-" + question.id).attr("multiple", "multiple").attr("class", "option-list");
		var listsContainer = $("<div></div>").attr("class", "options-container").attr("id", question.id);

		for (var j=0; j < question.options.length; j++) {
			var option = question.options[j];
			
			var optionInput = $("<option></option>");
			optionInput.attr("id", question.id + "-" + option.id);
			optionInput.attr("value", option.id);
			optionInput.text(option.name);
			optionSelect.append(optionInput);
		}

		var buttonContainer = $("<div></div>").attr("class", "move-buttons-container");
		var moveLeftButton = $("<input></input>").attr("class", "left-button").attr("type", "button").attr("value", ">>").attr("id", question.id + "-move-left");
		var moveRigthButton = $("<input></input>").attr("class", "right-button").attr("type", "button").attr("value", "<<").attr("id", question.id  + "-move-rigth");
		
		buttonContainer.append(moveLeftButton);
		buttonContainer.append(moveRigthButton);
		
		
		var optionSelectContainer = $("<div></div>").attr("class", "select-container-left").append(optionSelect);
		var answerSelectContainer = $("<div></div>").attr("class", "select-container-rigth").append(answerSelect);
		
		listsContainer.append(optionSelectContainer);
		listsContainer.append(buttonContainer);
		listsContainer.append(answerSelectContainer);
		return listsContainer;
	}
	
	this.prepareSurveyForSubmission = function() {
		$("select").filter(function() {
			   return this.id.match(/answer*/);
			}).each(function (index,value) {
			    if (value.options.length > 0 ) {
				    for (var i=0; i < value.options.length; i++) {
				        var option = value.options[i];
				        option.selected="selected";
				    }
			    }
			});
	};
	
	this.validateSurveyBeforeSubmission = function () {
		
	};
};